<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="css/index.css"> -->
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/手敲轮播图.css">
    <!-- <link rel="stylesheet" href="css/xxk.css"> -->
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/personal.css">
    <title>personal个人中心</title>
</head>
<body>
     <!-- 顶部提醒 -->
     <div class="caution">
    </div>
    <!-- 登录注册 -->
    <div class="topBar">
        
    </div>
    <!-- logo行 -->
    <div class="searchBar">
      
    </div>

     <!-- 导航栏 -->
     <div class="nav">
       
    </div>
   
    <div class="fenggexian"></div>

    <div class="box-d">
        <div class="box">
            <div class="topNav">
                <span>您现在的位置：</span><span><a href="#">中国图书网</a></span><span>&gt;我的账户</span>
            </div>
            <div class="content">
                <div class="content-left">
                    <div class="content-left-top">个人中心</div>
                    <span>订单管理</span>
                    <ul>
                        <li><a href="#">订单跟踪</a></li>
                        <li><a href="#">助力订单</a></li>
                        <li><a href="#">收货地址簿</a></li>
                        <li><a href="#">退换货管理</a></li>
                        <li><a href="#">我的竞拍</a></li>
                    </ul>
                    <span>我的账户</span>
                    <ul>
                        <li><a href="#">会员等级</a></li>
                        <li><a href="#">账户余额</a></li>
                        <li><a href="#">账户安全</a></li>
                        <li><a href="#">书馨卡</a></li>
                        <li><a href="#">我的优惠券</a></li>
                        <li><a href="#">我的书币</a></li>
                        <li><a href="#">书币换券</a></li>
                        <li><a href="#">我的邀请</a></li>
                        <li><a href="#">我的抽奖</a></li>
                        <li><a href="#">提现</a></li>
                        <li><a href="#">提现清单</a></li>
                    </ul>
                    <span>我关注的商品</span>
                    <ul>
                        <li><a href="#">我的收藏夹</a></li>
                        <li><a href="#">写书评</a></li>
                        <li><a href="#">我的书评</a></li>
                    </ul>
                    <span>个人信息</span>
                    <ul>
                        <li><a href="#">站内短信</a></li>
                        <li><a href="#">编辑个人档案</a></li>
                        <li><a href="#">修改密码</a></li>
                    </ul>
                    <span><a href="#">退出登录</a></span>
                </div>
                <div class="content-center">
                    <div class="content-center-top">
                        <div class="content-center-top-l">
                            <div><a href="#"><img src="http://www.bookschina.com/ViewOrder/images/userw.jpg" alt=""></a></div>
                            <p><a href="#">上传头像</a></p>
                        </div>
                        <div class="content-center-top-r">
                            <div class="content-center-top-r-d1"><span>欢迎，ztw_13566krr505</span></div>
                            <div class="content-center-top-r-d2">
                                <ul>
                                    <li>会员级别：1 <a href="#">再消费￥200元，就会成为二星级会员>></a> </li>
                                    <li>账户余额：<span>￥0.00</span></li>
                                </ul>
                            </div>
                            <div class="content-center-top-r-d3">
                                <ul>
                                    <li><a href="#">我的书虫值：0</a> </li>
                                    <li><a href="#">我的书币：0</a></li>
                                </ul>
                            </div>
                            <div class="content-center-top-r-d4">
                                <span>交易提醒：</span>
                                <ul>
                                    <li><a href="#">待支付订单(0)</a></li>
                                    <li><a href="#">待收货订单(0)</a></li>
                                    <li><a href="#">待评论商品(0)</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="content-center-bottom">
                        <div class="content-center-bottom-t">
                            <span>猜你可能会喜欢</span>
                        </div>
                        <div class="content-center-bottom-b">
                            <ul>
                                <li>
                                    <div class="content-center-bottom-b-ld1">
                                        <a href="#">
                                            <img src="http://image12.bookschina.com/2020/20200615/1/z8229283.jpg" alt="">
                                        </a>
                                    </div>
                                    <p class="textW"><a href="#">浮生六记</a></p>
                                    <div class="content-center-bottom-b-ld2"><s>￥36.0</s><span>￥10.8</span></div>
                                </li>

                                <li>
                                    <div class="content-center-bottom-b-ld1">
                                        <a href="#">
                                            <img src="http://image12.bookschina.com/2020/20200615/1/z8229283.jpg" alt="">
                                        </a>
                                    </div>
                                    <p class="textW"><a href="#">浮生六记</a></p>
                                    <div class="content-center-bottom-b-ld2"><s>￥36.0</s><span>￥10.8</span></div>
                                </li>

                                <li>
                                    <div class="content-center-bottom-b-ld1">
                                        <a href="#">
                                            <img src="http://image12.bookschina.com/2020/20200615/1/z8229283.jpg" alt="">
                                        </a>
                                    </div>
                                    <p class="textW"><a href="#">浮生六记</a></p>
                                    <div class="content-center-bottom-b-ld2"><s>￥36.0</s><span>￥10.8</span></div>
                                </li>

                                <li>
                                    <div class="content-center-bottom-b-ld1">
                                        <a href="#">
                                            <img src="http://image12.bookschina.com/2020/20200615/1/z8229283.jpg" alt="">
                                        </a>
                                    </div>
                                    <p class="textW"><a href="#">浮生六记</a></p>
                                    <div class="content-center-bottom-b-ld2"><s>￥36.0</s><span>￥10.8</span></div>
                                </li>

                                <li>
                                    <div class="content-center-bottom-b-ld1">
                                        <a href="#">
                                            <img src="http://image12.bookschina.com/2020/20200615/1/z8229283.jpg" alt="">
                                        </a>
                                    </div>
                                    <p class="textW"><a href="#">浮生六记</a></p>
                                    <div class="content-center-bottom-b-ld2"><s>￥36.0</s><span>￥10.8</span></div>
                                </li>
                                <li>
                                    <div class="content-center-bottom-b-ld1">
                                        <a href="#">
                                            <img src="http://image12.bookschina.com/2020/20200615/1/z8229283.jpg" alt="">
                                        </a>
                                    </div>
                                    <p class="textW"><a href="#">浮生六记</a></p>
                                    <div class="content-center-bottom-b-ld2"><s>￥36.0</s><span>￥10.8</span></div>
                                </li>

                                <li>
                                    <div class="content-center-bottom-b-ld1">
                                        <a href="#">
                                            <img src="http://image12.bookschina.com/2020/20200615/1/z8229283.jpg" alt="">
                                        </a>
                                    </div>
                                    <p class="textW"><a href="#">浮生六记</a></p>
                                    <div class="content-center-bottom-b-ld2"><s>￥36.0</s><span>￥10.8</span></div>
                                </li>

                                <li>
                                    <div class="content-center-bottom-b-ld1">
                                        <a href="#">
                                            <img src="http://image12.bookschina.com/2020/20200615/1/z8229283.jpg" alt="">
                                        </a>
                                    </div>
                                    <p class="textW"><a href="#">浮生六记</a></p>
                                    <div class="content-center-bottom-b-ld2"><s>￥36.0</s><span>￥10.8</span></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="content-right">
                    <div class="NoticeView">
                        <span>公告</span>
                        <ul>
                            <li><a href="#">中国图书网诚聘英才</a></li>
                            <li><a href="#">关注我们的官方微博</a></li>
                        </ul>
                        <span>书友推荐</span>
                        <ul>
                            <li><a href="#">戏年</a></li>
                            <li><a href="#">月亮</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>






    <!-- --------底部-------- -->
    <div class="bottom-box">
    </div>
    
</body>
</html>


<script src="./libs/jquery.js"></script>
<script>
    // 顶部提醒
    $(".caution").load("http://localhost:3000/public/public_index.html .cautionioc")

    // 开始动画
    $(".imgTop").load("http://localhost:3000/public/public_index.html .imgTop-box",function(){
        setTimeout(function(){
            console.log("这是三秒以后");
            $(".imgTop-box").animate({
                height : 100,
            }, 1000);
            $(".i1").animate({
                opacity: 'show'
            }, 1000);
            $(".i2").animate({
                height : 100, opacity: 'hide'
            }, 1000);
        },3000)
    })

    // 登录注册
    $(".topBar").load("http://localhost:3000/public/public_index.html .zhuce",function(){
        const zhanghu = document.getElementById("zhanghu");
        const zhul = document.querySelector(".zhul");
        zhanghu.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhanghu.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }
        zhul.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhul.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }

        //-------以下为登录注册行新加js

        if(localStorage.getItem("token") === "ok"){
            $(".loginArea").hide();
            $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
        }else{
            $(".loginArea1").hide();
            $(".loginArea").show();
        }

        $(".loginArea1-s2").click(function(){
            $(".loginArea1").hide();
            $(".loginArea").show();
            localStorage.setItem("token","no")
        })

        $(".zhanghu").click(function(){
            if(localStorage.getItem("token") === "ok"){
                $(".loginArea").hide();
                $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
            }else{
                if(confirm("您还未登录，是否前往登录？")){
                    location.href="./logon.html"
                }
                return false;
            }
        })








    })

    // logo行
    $(".searchBar").load("http://localhost:3000/public/public_index.html .searchBarFixed",function(){
        const otxt = document.getElementById("search");
        const obtn = document.querySelector(".s4");
        const oul = document.querySelector(".list");

        // 点击按钮，跳转到真实的百度搜索
        obtn.onclick = function(){
            location.href = "https://www.baidu.com/s?wd=" + otxt.value;
        }

        otxt.oninput = function(){
            
            // 判断输入框是否为空，为空，清除下拉菜单
            if(this.value === "") oul.innerHTML = "";
            oul.style.display = "block"
            // console.log(this.value)
            // 开启jsonp请求，请求百度数据
            jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",function  (res){
                // 请求成功后，处理数据
                // console.log(res.s);
                let str = "";
                // 拼接页面结构
                for(let i=0;i<res.s.length;i++){
                    str += `<li>${res.s[i]}</li>`
                }
                // 渲染页面
                // console.log(str)
                oul.innerHTML = str;
            
            
                oul.onmouseover = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "red";
                        // console.log(tag.innerHTML);
                        tag.onclick = function(){
                            otxt.value = tag.innerHTML;
                            oul.style.display="none";
                        }
                    }
                }
                oul.onmouseout = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "black";
                    }
                }
            },{
                wd:this.value,
                cb:"ajshdfgausdf",
                selfName:"cb"
            })
        }
        function jsonp(url,cb,data){
            let str = "";
            for(let i in data){
                str += `${i}=${data[i]}&`
            }
            url += "?" + str + "_qft_=" + Date.now();
            const script = document.createElement("script");
            script.src = url;
            document.body.appendChild(script);
            window[data[data.selfName]] = function(res){
            cb(res);
        }
        }
    })
        
    //导航栏
    $(".nav").load("http://localhost:3000/public/public_index.html .nav1")

    //底部
    $(".bottom-box").load("http://localhost:3000/public/public_index.html .bottom")
</script>